<template>
  <div id="app">
    <Navbar />
    <main>
      <section class="question-bank">
        <h1>题库</h1>
        <div v-if="currentQuestion" class="question-item">
          <h2 class="question-title">{{ currentQuestion.title }}</h2>
          <div v-if="currentQuestion.type ==='multiple-choice'" class="question-options">
            <div v-for="(option, index) in currentQuestion.options" :key="index" class="question-option">
              <input type="radio" :id="`option-${index}`" :name="`question-${currentQuestion.id}`" :value="option" />
              <label :for="`option-${index}`">{{ option }}</label>
            </div>
          </div>
          <div v-if="currentQuestion.type ==='short-answer'">
            <textarea v-model="answer[currentQuestion.id]" placeholder="请输入您的答案"></textarea>
          </div>
          <button @click="nextQuestion">下一题</button>
        </div>
      </section>
    </main>
    <Footer />
  </div>
</template>

<script setup>
import Navbar from "@/components/Navbar/Navbar.vue";
import Footer from "@/components/Footer/Footer.vue";
import { ref } from "vue";

// 模拟题库数据
const questionBank = [
  {
    id: 1,
    type: "multiple-choice",
    title: "以下哪个是计算机的核心部件？",
    options: ["CPU", "内存", "硬盘", "显卡"]
  },
  {
    id: 2,
    type: "short-answer",
    title: "请简述大数据分析的主要步骤。"
  },
  {
    id: 3,
    type: "multiple-choice",
    title: "在 Vue.js 中，用于定义响应式数据的函数是？",
    options: ["ref", "reactive", "watch", "computed"]
  }
];

const currentQuestionIndex = ref(0);
const currentQuestion = ref(questionBank[currentQuestionIndex.value]);
const answer = ref({});

const nextQuestion = () => {
  currentQuestionIndex.value++;
  if (currentQuestionIndex.value < questionBank.length) {
    currentQuestion.value = questionBank[currentQuestionIndex.value];
  } else {
    // 全部题目答完后的逻辑，这里简单打印提示
    console.log("所有题目已答完！");
  }
};
</script>

<style scoped>
/* 整体页面布局 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.question-bank {
  padding: 40px;
}

.question-item {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.question-title {
  margin-bottom: 10px;
}

.question-options {
  margin-top: 10px;
}

.question-option {
  margin-bottom: 5px;
}

textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  margin-top: 10px;
}

button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background-color: #0056b3;
}
</style>